<template>
    <div class="side-container">
        <el-menu active-text-color="#006EFF" :default-active="topNavStore.active" class="el-menu-vertical-demo" router @select="handleOpen" @close="handleOpen">
            <el-menu-item index="/" :class="{ 'item': topNavStore.active == '/' }">
                <el-icon>
                    <img v-if="topNavStore.active != '/'" src="../../assets/images/Home.png" alt="">
                    <img class="select-img" v-else src="../../assets/images/Home_select.png" alt="">
                </el-icon>
                <span :class="{ 'nav-text': topNavStore.active == '/' }">首页</span>
            </el-menu-item>
            <el-menu-item index="/DueDiligence" :class="{ 'item': topNavStore.active == '/DueDiligence' }">
                <el-icon>
                    <img v-if="topNavStore.active != '/DueDiligence'" src="../../assets/images/DueDiligence.png" alt="">
                    <img class="select-img" v-else src="../../assets/images/DueDiligence_select.png" alt="">
                </el-icon>
                <span :class="{ 'nav-text': topNavStore.active == '/DueDiligence' }">企业尽职调查</span>
            </el-menu-item>
            <el-menu-item index="/AIAnalysis" :class="{ 'item': topNavStore.active == '/AIAnalysis' }">
                <el-icon>
                    <img v-if="topNavStore.active != '/AIAnalysis'" src="../../assets/images/AIAnalysis.png" alt="">
                    <img class="select-img" v-else src="../../assets/images/AIAnalysis_select.png" alt="">
                </el-icon>
                <span :class="{ 'nav-text': topNavStore.active == '/AIAnalysis' }">AI智能分析</span>
            </el-menu-item>
            <el-menu-item index="/CompositeAnalysis" :class="{ 'item': topNavStore.active == '/CompositeAnalysis' }">
                <el-icon>
                    <img v-if="topNavStore.active != '/CompositeAnalysis'" src="../../assets/images/CompositeAnalysis.png" alt="">
                    <img class="select-img" v-else src="../../assets/images/CompositeAnalysis_select.png" alt="">
                </el-icon>
                <span :class="{ 'nav-text': topNavStore.active == '/CompositeAnalysis' }">综合分析报告</span>
            </el-menu-item>
            <el-sub-menu index="/AboutUS">
                <template #title>
                    <el-icon>
                        <img src="../../assets/images/AboutUS.png" alt="">
                        <!-- <img class="select-img" v-else src="../../assets/images/AboutUS_select.png" alt=""> -->
                    </el-icon>
                    <span>关于我们</span>
                </template>
                <el-menu-item index="/AboutUS/productinterduce">
                    <span>产品简介</span>
                </el-menu-item>
                <el-menu-item index="/AboutUS/companyinterduce">
                    <span>公司介绍</span>
                </el-menu-item>
                <el-menu-item index="/AboutUS/contactus">
                    <span>联系我们</span>
                </el-menu-item>
            </el-sub-menu>
            <el-menu-item index="/UCenter" :class="{ 'item': topNavStore.active == '/UCenter' }">
                <el-icon>
                    <img v-if="topNavStore.active != '/UCenter'" src="../../assets/images/UCenter.png" alt="">
                    <img class="select-img" v-else src="../../assets/images/UCenter_select.png" alt="">
                </el-icon>
                <span :class="{ 'nav-text': topNavStore.active == '/UCenter' }">用户中心</span>
            </el-menu-item>
        </el-menu>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue"
import { useTopNavStore } from  "../../stores/TopNav"
import Cookies from "js-cookie";

const topNavStore = useTopNavStore()

const handleOpen = (key, keyPath) => {
    Cookies.set("active",key)
    topNavStore.active = key
}

</script>
<style>
.el-menu {
    border-right: 0 !important;
}
</style>
<style lang="less" scoped>
.side-container {
    height: 100vh;
    background: #fff;
    box-shadow: 8px 0 30px rgba(0, 38, 115, 0.1);
}

.item {
    background: url("../../assets/images/nav-bg.png") no-repeat;
    background-size: cover;
    background-size: 100% 115%;
}

.nav-text {
    color: #fff;
}
img{
    width: 18px;
    height: 18px;
}
.select-img{
    width: 15px;
    height: 15px;
}
</style>
